<template>
    <div>
        <h1>组件传值 props</h1>
        <SonDemo1 :title="'子组件的标题'" :description="des"></SonDemo1>
        <SonDemo3 :title="`SonDemo3子组件的标题`" :des="sd3Des" :propH="sd3ProrsFunc"></SonDemo3>
        <SonDemo2 :title="`SonDemo2子组件的标题`" :des="sd2Des" :PropH="sd2ProrsFunc"></SonDemo2>
        <SonDemo4 :msg="'h函数的标题msg'"></SonDemo4>
        <SonDemo5 :msg="'JSX函数的标题msg'"></SonDemo5>
        <SonDemo6 msg="son6的信息"></SonDemo6>
        <SonDemo7 title="son7的标题" :user msg="son7的信息"></SonDemo7>
        <SonDemo8 :user msg="son8的信息"></SonDemo8>
        <SonDemo9 v-for="item in userArr" :key="item.id" :user="item"></SonDemo9>
    </div>
</template>

<script lang="ts">
export default {
    name: 'diyDemo42'
}
</script>

<script setup lang='ts'>
// 引入子组件
import { ref } from 'vue';
import SonDemo1 from './components/SonDemo1.vue';
import SonDemo3 from './components/SonDemo3.vue';
import SonDemo2 from './components/SonDemo2.vue';
import SonDemo4 from './components/SonDemo4.vue';
import SonDemo5 from './components/SonDemo5';
import SonDemo6 from './components/SonDemo6.vue';
import SonDemo7 from './components/SonDemo7.vue';
import { type Iuser } from './components/SonDemo7.vue';
import SonDemo8 from './components/SonDemo8.vue';
import SonDemo9 from './components/SonDemo9.vue';

const des = 9999
const sd3Des = ref('传入的`sd3Des`')

const sd2Des = ref('传入的`sd2Des`')
const sd2User = ref({
    name: '崔梦娇',
    sex: 0
})

const user = ref<Iuser>({
    name: '黄家辉',
    sex: '男',
    age: 66
})

const userArr = ref<Iuser[]>([
    {
        id: 1,
        name: '黄家辉',
        sex: '男',
        age: 66
    },
    {
        id: 2,
        name: '小红',
        sex: '女',
        age: 22
    },
    {
        id: 3,
        name: '小绿',
        sex: '男',
        age: 33
    },
])


// 定义函数 传入子组件
const sd3ProrsFunc = (sonTitle: string, func: Function) => {
    console.log('这是一个父组件的函数sd3ProrsFunc，他被传入了子组件。', sonTitle);
    func()
}
// 定义函数 传入子组件
const sd2ProrsFunc = (sonTitle: string, func: Function) => {
    console.log('这是一个父组件的函数sd2ProrsFunc，他被传入了子组件。', sonTitle);
    func()
}




</script>

<style></style>